<template>
  <div>
    <div class="D_1">
      <el-radio-group v-model="tabPosition" style="margin-bottom: 10px">
        <!-- <el-radio-button label="left">left</el-radio-button> -->
      </el-radio-group>
      
      
      
      <el-tabs :tab-position="tabPosition" style="height: 100%">
        <el-tab-pane label="用户管理"
          ><h2>用户管理</h2>
          <div class="div99">
            <el-button @click="createone" type="success"
              >新增用户信息</el-button
            >
          </div>
          <el-table :data="tableData" border style="width: 100%" class="table1">
            <el-table-column prop="id" label="ID" width="50"> </el-table-column>
            <el-table-column prop="username" label="姓名" width="180">
            </el-table-column
            ><el-table-column prop="position" label="岗位" width="180">
            </el-table-column>
            <el-table-column prop="role" label="角色"> </el-table-column>
            <el-table-column prop="permission" label="权限" width="50">
            </el-table-column>
            <el-table-column prop="branch" label="部门"> </el-table-column>
            <el-table-column prop="rank" label="职级"> </el-table-column>

            <el-table-column label="操作" width="200">
              <!-- -------------------------------------------------------------------------------------------------------------- -->
              <template slot-scope="scope">
                <el-button type="text" @click="dialogFormVisible = true"
                  >修改&emsp;&emsp;</el-button
                >

                <el-dialog
                  title="修改用户信息"
                  :visible.sync="dialogFormVisible"
                >
                  <el-form :model="form">
                    <el-form-item label="ID" :label-width="formLabelWidth">
                      <el-input v-model="form.id" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item
                      label="用户名称"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="form.username"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      label="用户岗位"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="form.position"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      label="用户角色"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="form.role"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      label="用户权限"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="form.permission"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      label="用户部门"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="form.branch"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      label="用户职级"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="form.rank"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false"
                      >取 消</el-button
                    >
                    <el-button type="primary" @click="xiugai(scope.row.id)"
                      >确 定</el-button
                    >
                  </div>
                </el-dialog>
                <el-button type="primary" @click="pop(scope.row.id)"
                  >删除</el-button
                >
              </template>

              <!-- ---------------------------------------角色------------------------------------------------ -->
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="角色管理" class="tableall"
          > <h2>角色管理</h2> 
          <div class="div99">
            <el-button @click="createrole" type="success"
              >新增角色信息</el-button
            >
          </div>
          <el-table :data="rolelist" border style="width: 100%">
            <el-table-column prop="id" label="ID" width="150">
            </el-table-column>
            <el-table-column prop="role_name" label="角色名称" width="180">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="dialogFormVisible = true"
                  >修改&emsp;&emsp;</el-button
                >

                <el-dialog
                  title="修改角色信息"
                  :visible.sync="dialogFormVisible"
                >
                  <el-form :model="roleform">
                    <el-form-item label="ID" :label-width="formLabelWidth">
                      <el-input v-model="roleform.id" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item
                      label="角色名称"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="roleform.role_name"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      label="备注"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="roleform.beizhu"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>

                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false"
                      >取 消</el-button
                    >
                    <el-button type="primary" @click="xiugai(scope.row.id)"
                      >确 定</el-button
                    >
                  </div>
                </el-dialog>
                <el-button6 type="primary" @click="ppp(scope.row.id)"
                  >删除</el-button6
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- ----------------------------------------------权限------------------------------------------------------------ -->

        
          <el-tab-pane label="权限管理" class="tableall"
          > <h2>权限管理</h2> 
          <div class="div99">
            <el-button @click="createpermission" type="success"
              >新增权限信息</el-button
            >
          </div>
          <el-table :data="permissionList" border style="width: 100%">
            <el-table-column prop="id" label="ID" width="150">
            </el-table-column>
            <el-table-column prop="permission_name" label="权限名称" width="180">
            </el-table-column>
            <el-table-column prop="permission_level" label="权限等级" width="180">
            </el-table-column>
            <el-table-column prop="permission_url" label="权限路由" width="180">
            </el-table-column>
            
            <el-table-column label="操作">
              <template slot-scope="scope">
                <!-- -----------对话框 -->
                <el-button type="text" @click="dialogFormVisible = true"
                  >修改&emsp;&emsp;</el-button>
                <el-dialog
                  title="修改角色信息"
                  :visible.sync="dialogFormVisible"
                >
                  <el-form :model="permform">
                    <el-form-item label="ID" :label-width="formLabelWidth">
                      <el-input v-model="roleform.id" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item
                      label="权限名称"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="permform.permission_name"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      label="权限等级"
                      :label-width="formLabelWidth"
                    >
                      <el-inputj
                        v-model="permform.permission_level"
                        autocomplete="off"
                      ></el-inputj>
                    </el-form-item>
                    <el-form-item
                      label="权限路由"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="permform.permission_url"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      label="备注"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="permform.beizhu"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>

                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false"
                      >取 消</el-button
                    >
                    <el-button type="primary" @click="updateperm(scope.row.id)"
                      >确 定</el-button
                    >
                  </div>
                </el-dialog>
                <el-button type="primary" @click="ppp(scope.row.id)"
                  >删除</el-button>
                
                
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        
<!--  --------------------------------------------------------------菜单 -->
        <el-tab-pane label="菜单管理" class="tableall">
          <h2>菜单管理</h2>
          
          <div class="div99">
            <el-button @click="createmenu" type="success"
              >新增菜单信息</el-button
            >
          </div>
          <el-table :data="menulist" border style="width: 100%">
            <el-table-column prop="id" label="ID" width="150">
            </el-table-column>
            <el-table-column prop="menu_name" label="职级名称" width="180">
            </el-table-column>
            <el-table-column prop="address" label="路由地址" width="180">
            </el-table-column>
            <el-table-column prop="parent" label="parent_id" width="180">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="dialogFormVisible = true"
                  >修改&emsp;&emsp;</el-button>
                <el-dialog
                  title="修改角色信息"
                  :visible.sync="dialogFormVisible"
                >
                  <el-form :model="menuform">
                    <el-form-item label="ID" :label-width="formLabelWidth">
                      <el-input v-model="roleform.id" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item
                      label="菜单名称"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="menuform.menu_name"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      label="菜单路由"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="menuform.address"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      label="自关联子级id"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="menuform.parent"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    

                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false"
                      >取 消</el-button
                    >
                    <el-button type="primary" @click="updatemenu(scope.row.id)"
                      >确 定</el-button
                    >
                  </div>
                </el-dialog>
                <el-button type="primary" @click="ppp(scope.row.id)"
                  >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- ------------------------------------------------------------------------------职级 -->
        <el-tab-pane label="职级管理" class="tableall"> <h2>职级管理</h2> 
          <div class="div99">
            <el-button @click="createrank" type="success"
              >新增用户信息</el-button
            >
          </div>
          <el-table :data="ranklist" border style="width: 100%">
            <el-table-column prop="id" label="ID" width="150">
            </el-table-column>
            <el-table-column prop="rank_name" label="职级名称" width="180">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="dialogFormVisible = true"
                  >修改&emsp;&emsp;</el-button
                >

                <el-dialog
                  title="修改角色信息"
                  :visible.sync="dialogFormVisible"
                >
                  <el-form :model="rankform">
                    <el-form-item label="ID" :label-width="formLabelWidth">
                      <el-input v-model="roleform.id" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item
                      label="角色名称"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="rankform.rank_name"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      label="备注"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="rankform.beizhu"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>

                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false"
                      >取 消</el-button
                    >
                    <el-button type="primary" @click="xiugai(scope.row.id)"
                      >确 定</el-button
                    >
                  </div>
                </el-dialog>
                <el-button type="primary" @click="ppp(scope.row.id)"
                  >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- ----------------------------------------------------------------------部门 -->
        <el-tab-pane label="部门管理" class="tableall">
          <h2>部门管理</h2>
          
          <div class="div99">
            <el-button @click="createrank" type="success"
              >新增部门信息</el-button
            >
          </div>
          <el-table :data="branchlist" border style="width: 100%">
            <el-table-column prop="id" label="ID" width="150">
            </el-table-column>
            <el-table-column prop="branch_name" label="部门名称" width="180">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary">修改</el-button>
                <el-button type="primary" @click="pppp(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- ----------------------------------------------------------------岗位-------------- -->
        <el-tab-pane label="岗位管理"> <h2>岗位管理</h2>
        <div class="div99">
            <el-button @click="createrole" type="success"
              >新增部门信息</el-button
            >
          </div>
          <el-table :data="positionlist" border style="width: 100%">
            <el-table-column prop="id" label="ID" width="150">
            </el-table-column>
            <el-table-column prop="position_name" label="岗位名称" width="180">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary">修改</el-button>
                <el-button type="primary" @click="ppp(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="工资条"> <h2>工资条</h2> 
                    <el-table :data="moneylist" border style="width: 100%">
            <el-table-column prop="id" label="ID" width="150">
            </el-table-column>
            <el-table-column prop="user" label="员工名称" width="180">
            </el-table-column>
            <el-table-column prop="work_day" label="出勤天数" width="180">
            </el-table-column>
            <el-table-column prop="absenteeism_day" label="旷工天数" width="180">
            </el-table-column>
            <el-table-column prop="basic_money" label="基本工资" width="180">
            </el-table-column>
            <el-table-column prop="rank_money" label="岗位工资" width="180">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary">修改</el-button>
                <el-button type="primary" @click="oop(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="登录日志"> <h2>登录日志</h2> 

        </el-tab-pane>
        <el-tab-pane label="创建流程">
         <div class="div99">
            
          </div>
          <el-table :data="processlist" border style="width: 100%">
            <el-table-column prop="id" label="ID" width="150">
            </el-table-column>
            <el-table-column prop="proname" label="流程名称" width="180">
            </el-table-column>
            <el-table-column prop="prodate" label="创建时间" width="180">
               <!-- <div class="block"> -->
    <!-- <span class="demonstration">创建时间</span>
    <el-date-picker
      v-model="prodate"
      type="datetime"
      placeholder="选择日期时间">
    </el-date-picker> -->
  <!-- </div> -->
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" @click="dialogFormVisible = true"
                  >新增信息</el-button
                > &emsp;&emsp;
                <el-dialog
                  title="新增流程信息"
                  :visible.sync="dialogFormVisible"
                >
                  <el-form :model="processform">
                    <!-- <el-form-item label="ID" :label-width="formLabelWidth">
                      <el-input v-model="processform.id" autocomplete="off"></el-input>
                    </el-form-item> -->
                    <el-form-item
                      label="流程名称"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="processform.proname"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      label="时间"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="processform.prodate"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>

                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false"
                      >取 消</el-button
                    >
                    <el-button type="primary" @click="createprocess(scope.row.id)" 
                      >确 定</el-button
                    >
                  </div>
                </el-dialog>
                <el-button type="danger" @click="popprocess(scope.row.id)"
                  >删除</el-button>
                  <el-button type="info"  @click="xq">
                    详情
                  </el-button>
              </template>
              <div>
                <el-button type="info">
                    点击查看审批进度
                </el-button>
              </div>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="车辆信息"> 
          
          <h2>车辆信息</h2> 
           <el-table :data="catlist" border style="width: 100%">
            <el-table-column prop="id" label="ID" width="150">
            </el-table-column>
            <el-table-column prop="vehicle_type" label="车辆类型" width="180">
            </el-table-column>
            <el-table-column prop="vehicle_number" label="车牌号" width="180">
            </el-table-column>
            <el-table-column prop="vehicle_state" label="状态(2/使用中,3/未使用,4/维修中)" width="180">
            </el-table-column>
            
            
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary">修改</el-button>
                <el-button type="primary" @click="oop(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>

        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination layout="prev, pager, next" :total="50"> </el-pagination>
    </div>
  </div> 
</template>

<script>
export default {
  name: "mainhome",
  data() {
    return {
      
      tabPosition: "left",
      tableData: [],
      rolelist:[],
      permissionList:[],
      processlist:[],
      ranklist:[],
      menulist:[],
      branchlist:[],
      moneylist:[],
      catlist:[],
      vehicle_state:0,
      dialogFormVisible: false,

      form: {
        
        username: "",
        position: "",
        role: "",
        permission: 0,
        branch: "",
        rank: "",
      },
      roleform: {
        role_name :'',
        beizhu:'',
      },
      permform:{
        permission_name:'',
        permission_level:'',
        permission_url:'',
        beizhu:'',
      },
      menuform:{
        menuform_name:'',
        address:'',
        parent:'',
      },
      rankform:{

      },
      processform:{
        proname:'',
        prodate:'',
      },
      
      formLabelWidth: "200px",
    };
  },
  props: {},

  components: {},

  created() {},

  mounted() {
    this.Showdata();
    this.Showrole();
    this.Showper();
    this.Showrank();
    this.Showbranch();
    this.Showmenu();
    this.Showposition();
    this.Showprocess();
    this.Showmoney();
    this.Showcat();
  },

  methods: {
    Showdata() {
      this.axios
        .get("http://127.0.0.1:8000/rbac/v1/showuser/")
        .then((resp) => {
          if (resp.data.code == 200) {
            this.tableData = resp.data.data;
            // console.log(this.tableData)
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    createone() {
      this.$router.push("/createuser");
    },
    createrole(){
      this.$router.push('/createrole')
    },
    createpermission(){
      
      this.$router.push('/createpermission')
    },
    createmenu(){
      this.$router.push('/createmenu')
    },
    createprocess(){
      this.axios.post('http://127.0.0.1:8000/proces/v1/createprocess/',{
        proname:this.processform.proname,
        prodate:this.processform.prodate,
      }).then(res=>{
        if (res.data.code) {
          alert('成功')
          this.dialogFormVisible =false
        }
      }).catch(err=>{
        console.log(err);
      })
    },
    pop(id) {
      this.axios
        .delete("http://127.0.0.1:8000/rbac/v1/delete/" + id + "/")
        .then((res) => {
          if (res.data.code == 200) {
            alert("删除成功");
          }
        })
        .catch((err) => {
          console.log(err);
          alert("删除失败");
        });
    },
    popprocess(id){
      this.axios.delete('http://127.0.0.1:8000/proces/v1/deleteprocess/' + id  + '/').then(res=>{
        if (res.data.code ==200) {
          alert('删除成功')
        }
      }).catch(err=>{
        console.log(err);
        alert('删除失败')
      })
    },
    xiugai(id) {
      this.axios
        .put("http://127.0.0.1:8000/rbac/v1/update/" + id + "/", {
          
          username: this.form.username,
          position: this.form.position,
          role: this.form.role,
          branch: this.form.branch,
          permission: this.form.permission,
          rank: this.form.rank,
        })
        .then((res) => {
          // this.$message({
          //       type: 'success',
          //       message: '商品修改成功!'
          //     });
          alert("修改成功");
          console.log(res);
          this.dialogFormVisible = false;
        })
        .catch((err) => {
          console.log(err);
          alert("修改失败");
        });
    },
    uprole(){
      this.axios.put('http://127.0.0.1:8000/rbac/v1/updaterole/' + id + '/',{
        role_name:this.roleform.role_name
      }).then(res=>{
        if (res.data.code ==200) {
          alert('修改成功')
          console.log(err);
        }
      }).catch(err=>{
        console.log(err);
      })
    },
    updateperm(id){
      this.axios.put('http://127.0.0.1:8000/rbac/v1/updatepermission/'+ id + '/',{
        permission_name:this.permform.permission_name,
        permission_level:this.permform.permission_level,
        permission_url:this.permform.permission_url,
        beizhu:this.permform.beizhu
      }).then(res=>{
        if (res.data.code == 200) {
          alert('修改成功')
          console.log(res);
        }
      }).catch(err=>{
        console.log(err);
        alert('修改失败')
      })
    },
    updatemenu(id){
      this.axios.put('http://127.0.0.1:8000/rbac/v1/updatemenu/2/',{
        menuform_name:this.menuform.menuform_name,
        address:this.menuform.address,
        parent:this.menuform.parent,
      }).then(res=>{
        if (res.data.code == 200) {
          alert('修改成功')
          console.log(res);
        }
      }).catch(err=>{
        alert('修改失败,请联系相关技术人员！！')
        console.log(err);
      })
    },
    Showrole(){
      this.axios.get('http://127.0.0.1:8000/rbac/v1/showrole/').then(res=>{
        if (res.data.code == 200) {
          this.rolelist = res.data.data
        }
      }).catch(err=>{
        console.log(err);
      })
    },
    Showper(){
      this.axios.get('http://127.0.0.1:8000/rbac/v1/showpermission/').then(res=>{
        if (res.data.code == 200) {
          this.permissionList = res.data.data
        }
      }).catch(err=>{
        console.log(err);
        alert(err)
      })
    },
    Showrank(){
      this.axios.get('http://127.0.0.1:8000/rbac/v1/showrank/').then(res=>{
        if (res.data.code == 200) {
          this.ranklist = res.data.data
          console.log(res);
        }
      }).catch(err=>{
        console.log(err);
        alert(err)
      })
    },
    Showprocess(){
      this.axios.get('http://127.0.0.1:8000/proces/v1/showprocess/').then(res=>{
        if (res.data.code ==200) {
          this.processlist = res.data.data
        }
      }).catch(err=>{
        console.log(err);
      })
    },
    Showmoney(){
      this.axios.get('http://127.0.0.1:8000/rbac/v1/showmoneybom/').then(res=>{
        if (res.data.code == 200) {
          this.moneylist = res.data.data
        }
      }).catch(err=>{
        console.log(err);
      })
    },
    Showbranch(){
      this.axios.get('http://127.0.0.1:8000/rbac/v1/showbranch/').then(res=>{
        if (res.data.code == 200) {
            this.branchlist = res.data.data
        }
      }).catch(err=>{
        console.log(err);
      })
    },
    Showcat(){
      this.axios.get('http://127.0.0.1:8000/rbac/v1/showvehicle/').then(res=>{
        if (res.data.code == 200) {
          this.catlist = res.data.data
        }
      }).catch(err=>{
        console.log(err);
      })
    },
    Showmenu(){
      this.axios.get('http://127.0.0.1:8000/rbac/v1/showmenu/').then(res=>{
        if (res.data.code == 200) {
          this.menulist = res.data.data
        }
      }).catch(err=>{
        console.log(err);
      })
    },
    Showposition(){
      this.axios.get('http://127.0.0.1:8000/rbac/v1/showposition/').then(res=>{
        if (res.data.code == 200) {
          this.positionlist = res.data.data
        }
      }).catch(err=>{
        console.log(err);
      })
      
    },
    ppp(){
      alert('功能暂未开发,敬请期待')
    },
    rolepop(id){
      alert('功能暂未开放，敬请等待')
    },
    f(){
      this.$router.push('/liucheng')
    },
    xq(){
      this.$router.push('/faqi')
    }
  },

  computed: {
    
  },

  watch: {},

  directives: {},

  filters: {},
};
</script>

<style>
.D_1 {
  width: 1430px;
  height: 800px;
}
.div99 {
  padding-left: 50%;
  padding-top: 3%;
  padding-bottom: 5%;
}
.table1{
  padding-left: 5%;
}
.tableall{
  padding-left: 8%;
  padding-top: 2%;
}
</style>
